<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { format } from 'date-fns';
import { getHotelsList } from '@/api/hotels';
import { useCheckoutStore } from '@/store/checkout';
import { usePopupStore } from '@/store/popup';
import { RouteMap, useRouter } from '@/router';
import { useLocale } from '@/locale/locale';
import { useTitle } from '@/hooks/useTitle';

const { t } = useLocale();
const checkoutStore = useCheckoutStore();
const popupStore = usePopupStore();
const router = useRouter();

const items = ref();

const date = computed(() => {
  const startDate = format(checkoutStore.startDate, 'MM.dd');
  const endDate = format(checkoutStore.endDate, 'MM.dd');
  return `${startDate}-${endDate} · ${t('LHTKey_hotelNight', { night: checkoutStore.daysNumber })}`;
});

const roomsNumber = computed(() => {
  return `· ${checkoutStore.roomsNumber} ${t('HomeShortRentRoomUnit')}`;
});

function openPopup(type = 'GuestNumberPicker') {
  if (type === 'GuestNumberPicker') {
    popupStore.openGuestNumberPicker();
  } else if (type === 'DatePicker') {
    popupStore.openDatePicker();
  }
}

async function fetchData() {
  const res = await getHotelsList({
    startDate: checkoutStore.startDate,
    endDate: checkoutStore.endDate,
    roomNumber: checkoutStore.roomsNumber.toString(),
    bookerNumber: checkoutStore.bookersNumber.toString(),
    adultNumber: checkoutStore.adultsNumber.toString(),
    childNumber: checkoutStore.childrenNumber.toString(),
    infantNumber: checkoutStore.babysNumber.toString(),
    isLease: checkoutStore.mode === 1 ? '1' : '2'
  });
  items.value = res.data.List;
}

onMounted(() => {
  fetchData();
  popupStore.init();
});

function handleUpdateDate(startDate: string, endDate: string) {
  checkoutStore.setDate(startDate, endDate);
  popupStore.closeDatePicker();
  fetchData();
}

useTitle('LKey_discover');
</script>

<template>
  <page-meta :page-style="`overflow: ${popupStore.isHidden ? 'hidden' : 'visible'}`"></page-meta>

  <uni-nav-bar :border="false" fixed left-width="0px" status-bar>
    <view class="flex items-center">
      <uv-icon name="calendar" size="28" />
      <view class="ml-1">
        <text class="text-base" @click="openPopup('DatePicker')">{{ date }}</text>
        <text class="text-base" @click="openPopup('GuestNumberPicker')">{{ roomsNumber }}</text>
      </view>
    </view>
  </uni-nav-bar>

  <view class="hotel-list">
    <uv-list>
      <uv-list-item v-for="item in items" :key="item.uid">
        <view
          :class="{ 'is-disabled': item.isDisable }"
          class="hotel-item"
          @click="
            !item.isDisable &&
            router.to(RouteMap.hotelDetails, {
              id: item.id,
              puid: item.uid
            })
          "
        >
          <view v-if="item.isDisable" class="hotel-item__mask"></view>
          <view class="hotel-item__cover">
            <image :src="item.cover" class="hotel-item__cover-image" />
          </view>
          <view class="hotel-item__meta">
            <view class="hotel-item__name">{{ item.name }}</view>
            <view class="hotel-item__district">{{ item.address }}</view>
            <view class="hotel-item__tags">
              <view v-for="tag in item.tagListArr" :key="tag" class="hotel-item__tag">
                {{ tag }}
              </view>
            </view>
            <view class="hotel-item__price">
              <text class="hotel-item__price-symbol">￥</text>
              <text class="hotel-item__price-amount">{{ item.price }}</text>
              <text class="hotel-item__price-currency">{{ item.currency }}</text>
              <text class="hotel-item__price-tips">{{ t('LPKey_start') }}</text>
            </view>
          </view>
        </view>
      </uv-list-item>
    </uv-list>
  </view>

  <apt-tab-bar></apt-tab-bar>

  <!-- 弹出层 -->
  <apt-date-picker
    :end-date="checkoutStore.endDate"
    :start-date="checkoutStore.startDate"
    @update="handleUpdateDate"
  />

  <apt-guest-number-picker
    :adults-number="checkoutStore.adultsNumber"
    :babys-number="checkoutStore.babysNumber"
    :children-number="checkoutStore.childrenNumber"
    @update="checkoutStore.setBookersNumber"
  />
</template>

<style lang="scss">
.hotel {
  &-list {
    background-color: white;
    margin-top: 20rpx;
  }

  &-item {
    display: flex;
    position: relative;

    & + & {
      .hotel-item__meta {
        border-top: 2rpx solid #f4f4f4;
      }
    }

    &__mask {
      background-color: rgba($color: #f4f4f4, $alpha: 0.35);
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 1;
    }

    &__cover {
      padding: 20rpx 20rpx 20rpx 32rpx;

      &-image {
        border-radius: 8rpx 8rpx 58rpx 8rpx;
        height: 282rpx;
        width: 192rpx;
      }
    }

    &__meta {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 20rpx 26rpx 28rpx 0;
    }

    &__name {
      color: #3d3d3d;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 44rpx;
      margin-bottom: 6rpx;
    }

    &__district {
      color: #898989;
      font-size: 24rpx;
      font-weight: 400;
      line-height: 34rpx;
      margin-bottom: 20rpx;
    }

    &__tags {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
    }

    &__tag {
      align-items: center;
      border: 1rpx solid #117954;
      border-radius: 4rpx;
      color: #117954;
      display: flex;
      font-size: 20rpx;
      height: 32rpx;
      justify-content: center;
      line-height: 28rpx;
      margin: 0 8rpx 8rpx 0;
      padding: 2rpx 6rpx;
    }

    &__price {
      align-items: baseline;
      color: #d13820;
      display: flex;
      justify-content: flex-end;
      line-height: 50rpx;

      &-symbol,
      &-currency {
        font-size: 24rpx;
      }

      &-amount {
        font-size: 36rpx;
      }

      &-tips {
        color: #adaeb0;
        font-size: 24rpx;
      }
    }
  }
}
</style>
